<!-- Quick Operate Navbar -->
<div class="card border-info">
    <div class="card-header border-info">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                {% if 'Account Overview' in subtitle %}
                    <a class="nav-link active" href="/site/account">Quickly Add</a>
                {% else %}
                    <a class="nav-link text-muted" href="/site/account">Overview</a>
                {% endif %}
            </li>
            <li class="nav-item">
                {% if 'Account List' in subtitle %}
                    <a class="nav-link active" href="/site/account-list">Quickly Add</a>
                {% else %}
                    <a class="nav-link text-muted" href="/site/account-list">Account List</a>
                {% endif %}
            </li>
            <li class="nav-item">
                {% if 'Account Platform' in subtitle %}
                    <a class="nav-link active" href="/site/account-platform">Quickly Add</a>
                {% else %}
                    <a class="nav-link text-muted" href="/site/account-platform">Platforms Manage</a>
                {% endif %}
            </li>
        </ul>
    </div>
    <div class="card-body">
        <form class="container text-center" method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="add">

            {% if 'Account Platform' in subtitle %}
                <div class="form-row">
                    <div class="input-group col-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">donut_small</i>
                            </div>
                        </div>
                        <input type="text" id="inputName" class="form-control" placeholder="Platform Name" name="name" required>
                    </div>
                    <div class="input-group col">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">description</i>
                            </div>
                        </div>
                        <input type="text" id="inputAccount" class="form-control" placeholder="Description" name="description">
                    </div>
                    <div class="col-1 text-right">
                        <button id="btn-add" type="submit" class="btn btn-outline-info">Add</button>
                        <button id="btn-unlock" type="button" class="btn btn-outline-secondary" hidden>Unlock</button>
                    </div>
                </div>
            {% else %}
                <div class="form-row">
                    <div class="col-1 text-left">
                        <select class="form-control" name="platform">
                            {% for platform in user_info.account_platforms.all %}
                                <option>{{ platform.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="input-group col">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">perm_identity</i>
                            </div>
                        </div>
                        <input id="encryptedName" type="hidden" name="name">
                        <input id="inputName" type="text" class="form-control" placeholder="Account Name" required>
                    </div>
                    <div class="input-group col">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">note</i>
                            </div>
                        </div>
                        <input id="encryptedAccount" type="hidden" name="account">
                        <input id="inputAccount" type="text" class="form-control" placeholder="Account Login Info" required>
                    </div>
                    <div class="input-group col">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">lock</i>
                            </div>
                        </div>
                        <input id="encryptedPassword" type="hidden" name="password">
                        <input id="inputPassword" type="text" class="form-control" placeholder="Account Password" required>
                    </div>
                    <div class="input-group col">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <i class="material-icons-sm">event_note</i>
                            </div>
                        </div>
                        <input id="encryptedNotes" type="hidden" name="notes">
                        <input id="inputNotes" type="text" class="form-control" placeholder="Notes">
                    </div>
                    <div class="col-1 text-right">
                        <button id="btn-add" type="submit" class="btn btn-outline-info">Add</button>
                        <button id="btn-unlock" type="button" class="btn btn-outline-secondary" hidden>Unlock</button>
                    </div>
                </div>
            {% endif %}
        </form>
    </div>
</div>

<script>
    // 检查解锁状态
    $(document).ready(function () {
        if (isLogin()) {
            console.log("logined!");
        } else {
            console.log("no login");
            $("#btn-add").attr("hidden", 'hidden');
            $("#btn-unlock").removeAttr("hidden");
        }
    });

    // 弹出解锁模态框
    $("#btn-unlock").click(function () {
        console.log("click");
        $("#modal-pwd").modal();
    });

    {% if 'Account Platform' not in subtitle %}
        // 添加账户，对数据进行加密处理
        $("#btn-add").click(function () {
            // 不加密账号名
            // $("#encryptedName").attr("value", encrypt_data($("#inputName").val()));
            $("#encryptedName").attr("value", $("#inputName").val());
            $("#encryptedAccount").attr("value", encrypt_data($("#inputAccount").val()));
            $("#encryptedPassword").attr("value", encrypt_data($("#inputPassword").val()));
            $("#encryptedNotes").attr("value", encrypt_data($("#inputNotes").val()));
        });
    {% endif %}
</script>